var path = require('path');

module.exports = {
  mode: 'production',
  entry: {
    // 可以配置生成 多个chunk，每个chunk都有一个启动模块
    // 可以配置 chunk 里面生成的 合并多模块 主要的js文件
    main: './src/index.js', //属性名：chunk的名称， 属性值：入口模块（启动模块）
    a: ['./src/a.js', './src/index.js'], //一个chunk 配置2个入口启动模块有两个 但生成的结果还说只有一个 文件 但是先运行a.js 再运行 index.js
  },
  output: {
    path: path.resolve(__dirname, 'target'), //必须配置一个绝对路径，表示资源放置的文件夹，默认是dist
    filename: '[id].[chunkhash:5].js', //配置的合并的js文件的规则
  },
  devtool: 'source-map',
};
// ‌一、dependOn 的作用‌
// 假设有以下场景：

// 两个入口文件 app.js 和 admin.js，都需要依赖同一个第三方库（如 lodash）。
// 如果不使用 dependOn，Webpack 会将 lodash 分别打包到 app.js 和 admin.js 中，导致代码冗余。
// 通过 dependOn，可以将公共依赖提取到独立的 chunk，实现复用。
// src/
// ├── app.js        // 入口1：应用主逻辑
// ├── admin.js      // 入口2：管理后台逻辑
// └── shared.js     // 公共依赖（如工具函数、第三方库）

// 这是webpack5的 配置
module.exports = {
  entry: {
    // chunk1
    app: {
      import: './src/app.js', // 入口文件路径
      dependOn: 'shared', // 依赖的共享 chunk  不加这个会将 shared chunk里面的资源 也打包到 app chunk里面
    },
    // chunk2
    admin: {
      import: './src/admin.js',
      dependOn: 'shared',
    },
    // chunk3
    shared: ['lodash', './src/shared.js'], // 公共依赖
    // 表示将这两个模块（lodash 和 ./src/shared.js）打包到一个独立的共享代码块（chunk）中

    b: {
      // dependOn: 当前入口所依赖的入口。它们必须在该入口被加载前被加载。
      // filename: 指定要输出的文件名称。
      // import: 启动时需加载的模块。
      // library: 指定 library 选项，为当前 entry 构建一个 library。
      // runtime: 运行时 chunk 的名字。如果设置了，就会创建一个新的运行时 chunk。在 webpack 5.43.0 之后可将其设为 false 以避免一个新的运行时 chunk。
      // publicPath: 当该入口的输出文件在浏览器中被引用时，为它们指定一个公共 URL 地址。请查看 output.publicPath。
    },
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

// 输出大概的样子

// shared.bundle.js（简化后的逻辑）
__webpack_modules__ = {
  // lodash 模块
  lodash: () => {
    /* ...lodash 的代码... */
  },

  // shared.js 模块
  './src/shared.js': () => {
    /* ...add 函数的代码... */
  },
};

// app.bundle.js（简化后的逻辑）
// 1. Webpack 运行时检查依赖的 chunk 是否已加载
__webpack_require__.e('shared').then(() => {
  // 2. 从 shared chunk 的模块注册表中获取模块
  const { add } = __webpack_require__('./src/shared.js');
  const _ = __webpack_require__('lodash');

  // 3. 执行 app.js 的逻辑
  console.log(add(1, 2)); // 3
  console.log(_.sum([1, 2, 3])); // 6
});
